<template>
	<view class="container">
		<view class="top"></view>
		<template v-if="ShowFace">
		<view class="square" style="margin-top: -130rpx;">
			<view class="error" v-if="Info.IsIdentify==2" v-html="Reason"></view>
			<view class="titles">真人头像照片<text>（必传）</text></view>
			<view class="list" style="margin-left:165rpx;">
				<view class="avatar" @click="ChooseAvatarPhoto()">
					<image v-if="Info.AvatarPhoto==''" src="https://yuehuiba.qiyedaishu.com/img/avatarphoto.png" />
					<image v-else :src="Tools.GetImg(Info.AvatarPhoto,200)" mode="aspectFill"/>
				</view>
				<view class="tip">上传真人头像照片</view>
			</view>
			<view class="require border-t">
				<view class="name">拍摄要求</view>
				<view class="line">1.请保持<text class="red">姿势端正，目视前方，不要遮挡面部</text></view>
				<view class="line">2.只需拍摄<text class="red">上半身</text>即可，<text class="red">面部细节要清晰可见</text></view>
			</view>
		</view>
		<view class="square">
			<view class="titles">上传身份证<text>（必传）</text></view>
			<view class="list">
				<view class="idcard" @click="ChooseIDCardA()">
					<image v-if="Info.IDCardA==''" src="http://download.qiyedaishu.com/common/zheng.png" />
					<image v-else :src="Tools.GetImg(Info.IDCardA,200)" mode="aspectFill"/>
				</view>
				<view class="tip">身份证正面</view>
			</view>
			<view class="list">
				<view class="idcard" @click="ChooseIDCardB()">
					<image v-if="Info.IDCardB==''" src="http://download.qiyedaishu.com/common/fan.png" />
					<image v-else :src="Tools.GetImg(Info.IDCardB,200)" mode="aspectFill"/>
				</view>
				<view class="tip">身份证反面</view>
			</view>
			<view class="require border-t">
				<view class="name">拍摄要求</view>
				<view class="line">1.大陆公民持有的本人有效二代身份证</view>
				<view class="line">2.拍摄时确保身份证<text class="red">边框完整，字体清晰，亮度均匀</text></view>
			</view>
		</view>
		</template>
		<view class="square realinfo">
			<view class="titles">实名信息<text>（必填）</text></view>
			<view class="cu-form-group border-b" style="width:100%;">
				<view class="title">真实姓名</view>
				<input name="RealName" placeholder="请填写身份证上的真实姓名" :value="Info.RealName" @input="InputRealName"></input>
			</view>
			<view class="cu-form-group border-b" style="width:100%;">
				<view class="title">身份证号</view>
				<input name="IDCard" type="idcard" placeholder="请输入身份证号" :value="Info.IDCard" maxlength="18" @input="InputIDCard"></input>
			</view>
		</view>		
		<view class="dialog" v-if="Show && Info.IsIdentify==0">
			<view class="meng"></view>
			<view class="alert">
				<view class="title">温馨提示</view>
				<view class="tip" v-html="IdentifyTip"></view>
				<view class="btn" @click="CloseDialog">我知道了</view>
			</view>
		</view>
		<button class="publish" style="background-color: #6429fc;" @click="Identify()" v-if="LeaveIdentifyCount>0 && (Info.IsIdentify==0 || Info.IsIdentify==2)">立即实名认证</button>
		<button class="publish" style="background-color: #6429fc;" v-if="Info.IsIdentify==1">你已完成实名认证</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Show:true,
				Info:{},
				IdentifyMoney:0,
				IdentifyTip:'',
				Reason:'',
				LeaveIdentifyCount:0,
				ShowFace:false
			};
		},
		onShow() {
			uni.$once("Cover",Path=>{
				this.Info.AvatarPhoto=Path;
			});
		},
		onLoad() {
			this.Find_UserDetail();
		},
		methods:{
			Find_UserDetail(){
				var data = {};
				data.Act="Find_UserDetail";
				this.Util.Loading("请稍候...");
				this.Util.Post(data, json=>{
					uni.stopPullDownRefresh();
					this.Util.HideLoading();
					this.Info=json.Data.Info;
					this.Reason = json.Data.Reason;
					this.ShowFace=this.Version>json.Data.Version?false:true;
					this.IdentifyTip=json.Data.IdentifyTip;
					this.LeaveIdentifyCount=json.Data.LeaveIdentifyCount;
				});
			},
			CloseDialog(){
				this.Show=false;
			},
			InputRealName(e){
				this.Info.RealName=e.detail.value;
			},
			InputIDCard(e){
				this.Info.IDCard=e.detail.value;
			},
			ChooseAvatarPhoto(){
				uni.chooseImage({
					count: 1, // 默认20
					sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res=> {
						this.Util.Loading("正在压缩，请稍候...");
						uni.compressImage({
							src: res.tempFilePaths[0],
							quality: 100, // 可以根据需要调整质量参数来控制压缩比例和图片质量
							success:json=> {
								this.Util.HideLoading();
								uni.navigateTo({
									url:'/pages/login/cover?Path='+json.tempFilePath
								})
						  }
						});
					}
				});
			},
			ChooseIDCardA() {
				uni.chooseImage({
					count: 1, // 默认20
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res=> {
						this.Util.Loading("正在压缩，请稍候...");
						uni.compressImage({
							src: res.tempFilePaths[0],
							quality: 100, // 可以根据需要调整质量参数来控制压缩比例和图片质量
							success:json=> {
								this.Util.HideLoading();
								this.Info.IDCardA = json.tempFilePath;
							}
						});
					}
				});
			},
			ChooseIDCardB() {
				uni.chooseImage({
					count: 1, // 默认20
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res=> {
						this.Util.Loading("正在压缩，请稍候...");
						uni.compressImage({
							src: res.tempFilePaths[0],
							quality: 100, // 可以根据需要调整质量参数来控制压缩比例和图片质量
							success:json=> {
								this.Util.HideLoading();
								this.Info.IDCardB = json.tempFilePath;
							} 
						});
					}
				});
			},			
			Identify(){
				if(this.Info.AvatarPhoto==''){
					this.Util.Toast("请上传真人上半身头像照片");
					return;
				}
				if(this.Info.IDCardA==''){
					this.Util.Toast("请上传身份证正面照片");
					return;
				}
				if(this.Info.IDCardB==''){
					this.Util.Toast("请上传身份证反面照片");
					return;
				}
				if(this.Info.RealName.trim()==''){
					this.Util.Toast("请填写身份证上的真实姓名");
					uni.pageScrollTo({
				　　　　duration: 500,// 过渡时间
				　　　　selector: '.realinfo',// 滚动的实际距离
				　　});
					return;
				}
				if(this.Info.IDCard.trim()==''){
					this.Util.Toast("请填写身份证号");
					uni.pageScrollTo({
				　　　　duration: 500,// 过渡时间
				　　　　selector: '.realinfo',// 滚动的实际距离
				　　});
					return;
				}				
				this.Util.Confirm("请确定以上信息全部真实，点击确定开始认证",()=>{
					var data = {};
					data.RealName=this.Info.RealName;
					data.IDCard=this.Info.IDCard;		
					var Paths=[this.Info.AvatarPhoto, this.Info.IDCardA, this.Info.IDCardB];
					this.Util.Loading("加载中...");
					this.Util.Upload(Paths,"upload_file_m",[],list=>{
						data.AvatarPhoto=list[0];
						data.IDCardA=list[1];
						data.IDCardB=list[2];
						this.Identify_Matcher(data);
					});
				});
			},
			Identify_Matcher(data){
				data.Act="Identify_Matcher";
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					if(json.State){ 
						this.Util.Toast("认证成功，请耐心等待结果",item=>{
							uni.setStorageSync("IsIdentify", 1);
							this.Util.ToSuccess('','认证成功，请耐心等待结果','返回',3);
						});
					}else{
						this.Util.Alert(json.Msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.container{padding-bottom: 160rpx;
		.top{width:100vw; height:45vw; background-image: url(https://yuehuiba.qiyedaishu.com/img/renzheng.png); background-size: 100%; background-repeat: no-repeat;}
		.square{width:700rpx; height:auto; position: relative; display:flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; margin-left:25rpx; padding-bottom:30rpx; padding-left:30rpx; padding-right:30rpx; background-color: #ffffff; border-radius: 20rpx; margin-top: 20rpx;
			.error{width:100%; height:auto; line-height: 44rpx; font-size:32rpx; padding-top:20rpx; color:red;}
			.titles{width:100%; height:auto; font-size: 36rpx; font-weight: bold; padding-top:30rpx; margin-bottom: 20rpx; text{color:red; font-size:30rpx;}}
			.list{width:310rpx; height: auto;
				.idcard{width:310rpx; height: 200rpx; float:left; padding:1rpx; border:1rpx dashed #cdcdcd; border-radius: 0rpx; overflow: hidden; image{width:100%; height:100%;}}
				.idcard:active{opacity: 0.6;}
				.avatar{width:310rpx; height: 310rpx; float:left; padding:1rpx; border:1rpx dashed #cdcdcd; border-radius: 0rpx; overflow: hidden; image{width:100%; height:100%;}}
				.avatar:active{opacity: 0.6;}
				.tip{width:100%; height:auto; text-align: center; font-size:32rpx; float:left; padding-top:10rpx;}
				
			}
			.require{width:100%; height:auto; margin-top:30rpx;
				.name{width:100%; height:auto; font-size:30rpx; font-weight: bold; float:left; margin-top:20rpx; color:#fe3903;}
				.line{width:100%; height:auto; line-height: 30rpx; font-size:28rpx; float:left; margin-top:10rpx; color:#878787;}
			}
			.box{width:100%; height: auto; float:left;
				.line{width:100%; height:50rpx; float:left; margin-bottom: 10rpx;
					.icon{width:50rpx; height:50rpx; float:left; image{width:100%; height: 100%; border-radius: 12rpx;}}
					.name{width:auto; height:50rpx; line-height: 50rpx; float:left; font-size:32rpx; padding-left:10rpx; color:#878787;}
				}
			}
			.certified{width:150rpx; height: 150rpx; position: absolute; right:50rpx; top:110rpx; opacity: 0.8; border-radius: 0rpx; image{width:150rpx; height: 150rpx;}}
		}
		.agree{width:100%; height:auto; margin-top:30rpx; padding-bottom:30rpx;
			radio-group{display: flex; flex-direction: row;
				label{width:100%; display: flex; flex-direction: row; padding-left:20rpx;
					.r1{height:50rpx; line-height: 60rpx;}
					.r2{padding-left:0rpx;height:60rpx; line-height: 60rpx; font-size:32rpx;}
				}
			}
		}
	}
</style>
